<!doctype html>
<html lang="en" class="feedback">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>酒店点评</title>
		<link rel="stylesheet" type="text/css" href="../mui/css/mui.min.css" />
		<link href="../styles/default.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="./css/feedback.css" />
		<style>
			.feedback .row {
				background-color: transparent;
			}
			
			.mui-icon-star-filled {
				color: #ff0066;
			}
			
			.feedback .image-item .image-up {
				line-height: 55px;
				background-color: #fff;
			}
			
			.feedback .image-list {
				padding: 16px 0;
			}
			
			.hotel-summary {
				display: flex;
				flex-direction: row;
				padding: 0.5rem 0.6rem;
				background-color: #fff;
			}
			
			.summary-img img {
				width: 80px;
				vertical-align: middle;
			}
			
			.detail-title {
				font-size: 0.7rem;
				color: #333;
			}
			
			.detail-con{
				font-size: 0.6rem;
				padding: 0 15px;
			}
			
			.detail-con a{
				float: right;
				color: #333;
			}
			
			.hotel-container {
				padding: 0 0.6rem;
			}
			
			.score {
				float: right;
				margin-top: 1px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hotel-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">酒店点评</h1>
		</header>
		<div class="mui-content">
			<div class="hotel-summary">
				<div class="summary-img">
					<img src="../styles/images/avatar-icon1.png" />
				</div>
				<div class="summar-detail">
					<p class="detail-title">深圳华侨城洲际大酒店</p>
					<div class="detail-con">
						<span>4.5分</span>
						<a>100条评论</a>
					</div>
				</div>
			</div>
			<div class="hotel-container">
				<div class="mui-content-padded">
					<div class="mui-inline">选择评分</div>
					<div class="icons mui-inline" style="margin-left: 6px;">
						<i data-index="1" class="mui-icon mui-icon-star"></i>
						<i data-index="2" class="mui-icon mui-icon-star"></i>
						<i data-index="3" class="mui-icon mui-icon-star"></i>
						<i data-index="4" class="mui-icon mui-icon-star"></i>
						<i data-index="5" class="mui-icon mui-icon-star"></i>
					</div>
					<span class="score">0.8分</span>
				</div>
				<div class="row mui-input-row" style="position: relative;">
					<textarea id='question' class="mui-input-clear question" placeholder="请详细描述你的问题和意见..."></textarea>
					<p style="position: absolute;bottom: 0;right: 0;">最少输入10个字，还可输入200字</p>
				</div>
				<div id='image-list' class="row image-list"></div>
				<p style="padding-left: 0;">上传图片，轻松领取额外10积分！</p>
				<p style="opacity: 0;">邮箱</p>
				<div class="mui-input-row" style="opacity: 0;">
					<input id='contact' type="text" class="mui-input-clear contact" placeholder="(选填,方便我们联系你 )" />
				</div>
				<button id="submit" class="mui-btn mui-btn-block hotel-btn-main" type="button">提交</button>
			</div>

		<script src="./js/mui.min.js"></script>
		<script src=" ./js/feedback.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			mui('.mui-scroll-wrapper').scroll();
		</script>
	</body>

</html>